<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>

</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{user.inf}">员工信息</h1>

    <div>
        <form id="userForm" class="form-horizontal" th:action="@{/admin/userInformation/edit}" th:object="${userInformation}" method="post">
            <input type="hidden" th:field="*{id}"/>
            <div class="form-group">
                <label for="name" class="col-sm-1 control-label"  th:text="#{user.name}">名字</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{name}" class="form-control" required minlength="2" maxlength="6" th:placeholder="#{user.name}"/>
                    <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="error">名字错误</p>
                </div>
                <label for="telephone" class="col-sm-1 control-label" th:text="#{user.telephone}">电话</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{telephone}" class="form-control" required minlength="11" th:placeholder="#{user.telephone}"/>
                    <p th:if="${#fields.hasErrors('telephone')}" th:errors="*{telephone}" class="error">电话错误</p>
                </div>
                <label for="jobNumber" class="col-sm-1 control-label" th:text="#{user.jobNumber}">工号</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{jobNumber}" class="form-control" required min="1" max="999999" th:placeholder="#{user.jobNumber}"/>
                    <p th:if="${#fields.hasErrors('jobNumber')}" th:errors="*{jobNumber}" class="error">工号错误</p>
                </div>
                <label for="morningDate" class="col-sm-1 control-label" th:text="#{user.morningDate}">早班日期</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" th:field="*{morningDate}" required th:placeholder="#{user.morningDate}" />
                    <p th:if="${#fields.hasErrors('morningDate')}" th:errors="*{morningDate}" class="error">早班日期错误</p>
                </div>
            </div>
            <div class="form-group">
                <label for="idCard" class="col-sm-1 control-label" th:text="#{user.idCard}">身份证</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{idCard}" class="form-control" required minlength="18" maxlength="18" th:placeholder="#{user.idCard}"/>
                    <p th:if="${#fields.hasErrors('idCard')}" th:errors="*{idCard}" class="error">身份证错误</p>
                </div>
                <label for="address" class="col-sm-1 control-label" th:text="#{user.address}">地址</label>
                <div class="col-sm-5">
                    <input type="text" th:field="*{address}" class="form-control" th:placeholder="#{user.address}"/>
                    <p th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="error">地址错误</p>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-5">
                    <input type="submit" th:value="#{submit}" class="btn btn-info"/>
                    &nbsp; &nbsp; &nbsp;
                    <a th:href="@{/admin/userInformation/list}" class="btn btn-info" th:text="#{back}">返回</a>
                </div>
            </div>
        </form>
    </div>
</div>
<th:block layout:fragment="pagescript">
    <script th:src="@{/js/jquery-ui/jquery-ui.datepicker-zh-CN.js}"></script>
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $('#morningDate').datepicker({
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 0,
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: 'slideDown'
            });
            $("#userForm").validate({
                onsubmit:true,// 是否在提交是验证
                //onfocusout:false,// 是否在获取焦点时验证
                //onkeyup:false,// 是否在敲击键盘时验证

                rules: {
                    idCard: {
                        remote: {
                            url: [[@{/admin/userInformation/idCardValidate}]],
                data: {
                id: function() {
                    return $("#id").val();
                },
                idCard: function() {
                    return $("#idCard").val();
                }
            }
        }
        },
            jobNumber: {
                remote: {
                    url: [[@{/admin/userInformain/jobNumberValidate}]],     //后台处理程序
                    type: "post",
                        data: {
                        id: function() {
                            return $("#id").val();
                        },
                        jobNumber: function() {
                            return $("#jobNumber").val();
                        }
                    }
                }
            },
            morningDate: {
                dateISO:true,
                    remote: {
                    url: [[@{/admin/userInformain/morningDateValidate}]],     //后台处理程序
                    type: "post",
                        data: {
                        id: function() {
                            return $("#id").val();
                        },
                        morningDate: function() {
                            return $("#morningDate").val();
                        }
                    }
                }
            }
        },
            messages:{　　　　//验证错误信息
                idCard: {
                    remote: "身份证号码已存在"
                },
                jobNumber: {
                    remote: "工号已存在"
                },
                morningDate: {
                    remote: "早班日期已存在"
                },
            },
            submitHandler: function(form) { //通过之后回调
                form.submit();
            },
            invalidHandler: function(form, validator) {return false;}
        });
        });
    </script>

</th:block>
</body>
</html>
